import React, { useState, useEffect } from 'react';
import Header from '../../../compoennts/studentAbsent/Header';
import AbsentTable from '../../../compoennts/studentAbsent/AbsentTable';
import { Cascader, Button } from 'antd';
import service from '../../../services';
import AbsentDrawer from '../../../compoennts/studentAbsent/AbsentDrawer';

const columns = [
    {
        title: '序号',
        width: 70,
        dataIndex: 'index',
        key: 'inedx',
        align: 'center'
    },
    {
        title: '请假学生',
        width: 130,
        dataIndex: 'name',
        key: 'name',
        align: 'center'
    },
    {
        title: '年级班级',
        width: 160,
        dataIndex: 'grade',
        key: 'grade',
        align: 'center'
    },
    {
        title: '请假类型',
        width: 130,
        dataIndex: 'type',
        key: 'type',
        align: 'center'
    },
    {
        title: '请假时间',
        width: 310,
        dataIndex: 'absentTime',
        key: 'absentTime',
        align: 'center'
    },
    {
        title: '请假事由',
        width: 170,
        dataIndex: 'reason',
        key: 'reason',
        align: 'center'
    },
    {
        title: '发起人',
        width: 160,
        dataIndex: 'originator',
        key: 'originator',
        align: 'center'
    },
    {
        title: '发起时间',
        width: 175,
        dataIndex: 'originTime',
        key: 'originTime',
        align: 'center'
    },
    {
        title: '请假状态',
        width: 160,
        dataIndex: 'state',
        key: 'state',
        align: 'center',
        render: (text) => {
            return (
                <>
                    <span color='orange'>{text}</span>
                </>
            )
        }
    },
    {
        title: '操作',
        width: 160,
        dataIndex: 'operation',
        key: 'operation',
        align: 'center',
        render: () => {
            return <a>查看</a>
        }
    }

];
const options = [
    {
        label: '待审核',
        value: '待审核',
    },
    {
        label: '已通过',
        value: '已通过',
    }
];


function AbsentAudit(props) {
    const [data, setData] = useState([]);
    const [openView, setOpenView] = useState(false); //控制查看 请假申请的抽屉
    const [openAduit, setOpenAduit] = useState(false); //控制审核 请假申请的抽屉
    const [Rowdata, setRowdata] = useState({});

    // 点击查看触发，打开抽屉，查看请假申请
    const openViewDrawer = (data) => {
        setOpenView(true)
        // console.log(data)
        setRowdata(data)
    }
    const onCloseView = () => {
        setOpenView(false)
    }
    // 点击查看触发，打开抽屉，审核请假申请
    const openAduitDrawer = (data) => {
        setOpenAduit(true)
        // console.log(data)
        setRowdata(data)
    }
    const onCloseAdiut = () => {
        setOpenAduit(false)
    }

    const columns = [
        {
            title: '序号',
            width: 70,
            dataIndex: 'id',
            key: 'id',
            align: 'center'
        },
        {
            title: '请假学生',
            width: 130,
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        },
        {
            title: '年级班级',
            width: 130,
            dataIndex: 'className',
            key: 'className',
            align: 'center'
        },
        {
            title: '请假类型',
            width: 130,
            dataIndex: 'type',
            key: 'type',
            align: 'center'
        },
        {
            title: '请假时间',
            width: 170,
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            render: (text) => { return new Date(text).toLocaleString() }
        },
        {
            title: '请假事由',
            width: 280,
            dataIndex: 'reason',
            key: 'reason',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (text) => text
        },
        {
            title: '发起人',
            width: 160,
            dataIndex: 'Publisher',
            key: 'Publisher',
            align: 'center'
        },
        {
            title: '发起时间',
            width: 175,
            dataIndex: 'time',
            key: 'time',
            align: 'center'
        },
        {
            title: '请假状态',
            width: 150,
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            render: (text) => {
                if (text == 0) {
                    return <span style={{ color: 'orange' }}>待审核</span>
                } else {
                    return <span style={{ color: 'rgb(0,198,149)' }}>已通过</span>
                }
            }
        },
        {
            title: '操作',
            width: 160,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            render: (_, record) => {
                if (record.state === 0) {
                    return (
                        <>
                            <a className='link_blue' onClick={() => { openAduitDrawer(record) }}>审核</a>
                        </>
                    )
                } else {
                    return <a className='link_blue' onClick={() => { openViewDrawer(record) }}>查看</a>
                }
            }
        }

    ];
    useEffect(() => {
        //获取请假学生列表的函数
        const getAbsentList = async () => {
            let result = await service.AbsentService.getAllAbsent()
            // console.log(result.data)
            setData(result.data)
        }
        getAbsentList()
    }, [JSON.stringify(data)])

    const handleOK = ()=>{
        setOpenAduit(false)
    }
    return (
        <div>
            <Header >
                <div>
                    请假状态：<Cascader placeholder="请选择" options={options} />
                </div>
            </Header>
            <AbsentTable columns={columns} data={data} rowKey={record => record.id} />

            {/* 抽屉-查看请假申请 */}
            < AbsentDrawer open={openView} onClose={onCloseView} data={Rowdata} />
            {/* 抽屉-审查请假申请 */}
            < AbsentDrawer open={openAduit} onClose={onCloseAdiut} data={Rowdata}>
                <Button type='primary' onClick={handleOK} >同意</Button>
                <Button  onClick={handleOK}>拒绝</Button>
            </AbsentDrawer>


        </div>
    );
}

export default AbsentAudit;